<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<canvas id="Mycanvas" width="1000" height="500"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById("Mycanvas");
			var ctx = canvas.getContext("2d");
			ctx.fillStyle = "chocolate";
			ctx.fillRect(0, 0, 1000, 500);
			var arcArr1 = [
				[0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
				[0, 0, 0, 1, 1, 1, 0, 0, 0, 0],
				[0, 0, 1, 1, 1, 1, 0, 0, 0, 0],
				[0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
				[0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
				[0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
				[0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
				[0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
				[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
				[0, 0, 1, 1, 1, 1, 1, 1, 0, 0]
			];
			var arcArr2 = [
				[0, 0, 0, 0, 1, 1, 1, 0, 0, 0],
				[0, 0, 0, 1, 1, 1, 1, 1, 0, 0],
				[0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
				[0, 0, 1, 0, 0, 0, 1, 1, 0, 0],
				[0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
				[0, 0, 0, 0, 0, 1, 1, 0, 0, 0],
				[0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
				[0, 0, 0, 1, 1, 0, 0, 0, 0, 0],
				[0, 0, 1, 1, 1, 1, 1, 1, 1, 0],
				[0, 0, 1, 1, 1, 1, 1, 1, 1, 0]
			];
			var arcArr3 = [
				[0, 0, 0, 0, 1, 1, 1, 0, 0, 0],
				[0, 0, 0, 1, 1, 1, 1, 1, 0, 0],
				[0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
				[0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
				[0, 0, 0, 0, 1, 1, 1, 0, 0, 0],
				[0, 0, 0, 0, 1, 1, 1, 0, 0, 0],
				[0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
				[0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
				[0, 0, 0, 1, 1, 1, 1, 1, 0, 0],
				[0, 0, 0, 0, 1, 1, 1, 0, 0, 0]
			];
			var arcArr4 = [
				[0, 0, 0, 0, 0, 1, 1, 0, 0, 0],
				[0, 0, 0, 0, 1, 1, 1, 0, 0, 0],
				[0, 0, 0, 1, 1, 1, 1, 0, 0, 0],
				[0, 0, 1, 1, 0, 1, 1, 0, 0, 0],
				[0, 0, 1, 1, 0, 1, 1, 0, 0, 0],
				[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
				[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
				[0, 0, 0, 0, 0, 1, 1, 0, 0, 0],
				[0, 0, 0, 0, 0, 1, 1, 0, 0, 0],
				[0, 0, 0, 0, 0, 1, 1, 0, 0, 0]
			];
			var arcArr5 = [
				[0, 0, 1, 1, 1, 1, 1, 0, 0, 0],
				[0, 0, 1, 1, 1, 1, 1, 0, 0, 0],
				[0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
				[0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
				[0, 0, 1, 1, 1, 1, 0, 0, 0, 0],
				[0, 0, 1, 1, 1, 1, 1, 0, 0, 0],
				[0, 0, 0, 0, 0, 1, 1, 0, 0, 0],
				[0, 0, 1, 0, 0, 1, 1, 0, 0, 0],
				[0, 0, 1, 1, 1, 1, 1, 0, 0, 0],
				[0, 0, 0, 1, 1, 1, 0, 0, 0, 0]
			];
			var arcArr6 = [
				[0, 0, 0, 0, 0, 1, 1,0, 0, 0],
				[0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
				[0, 0, 0, 1, 1, 0, 0, 0, 0, 0],
				[0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
				[0, 0, 1, 1, 1, 1, 1, 0, 0, 0],
				[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
				[0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
				[0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
				[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
				[0, 0, 0, 1, 1, 1, 1, 0, 0, 0]
			];
			var arcArr7 = [
				[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
				[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
				[0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
				[0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
				[0, 0, 0, 0, 0, 1, 1, 0, 0, 0],
				[0, 0, 0, 0, 0, 1, 1, 0, 0, 0],
				[0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
				[0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
				[0, 0, 0, 1, 1, 0, 0, 0, 0, 0],
				[0, 0, 0, 1, 1, 0, 0, 0, 0, 0]
			];
			var arcArr8 = [
				[0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
				[0, 0, 0, 1, 1, 1, 1, 0, 0, 0],
				[0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
				[0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
				[0, 0, 0, 1, 1, 1, 1, 0, 0, 0],
				[0, 0, 0, 1, 1, 1, 1, 0, 0, 0],
				[0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
				[0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
				[0, 0, 0, 1, 1, 1, 1, 0, 0, 0],
				[0, 0, 0, 0, 1, 1, 0, 0, 0, 0]
			];
			var arcArr9 = [
				[0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
				[0, 0, 0, 1, 1, 1, 1, 0, 0, 0],
				[0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
				[0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
				[0, 0, 0, 1, 1, 1, 1, 1, 0, 0],
				[0, 0, 0, 0, 1, 1, 1, 1, 0, 0],
				[0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
				[0, 0, 1, 0, 0, 0, 1, 1, 0, 0],
				[0, 0, 1, 1, 1, 1, 1, 0, 0, 0],
				[0, 0, 0, 1, 1, 1, 0, 0, 0, 0]
			];
			var arcArr0 = [
				[0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
				[0, 0, 0, 1, 1, 1, 1, 0, 0, 0],
				[0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
				[0, 1, 1, 0, 0, 0, 0, 1, 1, 0],
				[0, 1, 1, 0, 0, 0, 0, 1, 1, 0],
				[0, 1, 1, 0, 0, 0, 0, 1, 1, 0],
				[0, 1, 1, 0, 0, 0, 0, 1, 1, 0],
				[0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
				[0, 0, 0, 1, 1, 1, 1, 0, 0, 0],
				[0, 0, 0, 0, 1, 1, 0, 0, 0, 0]
			];
			var x = 10;
			var y = 10;
			setInterval(function() {
				//			for(var n=arcArr{;n<=10;n++)
				for(var i = 0; i <= 10; i++) {
					for(var j = 0; j <= 10; j++) {
						if(arcArr1[i][j] == 1) {
							ctx.beginPath();
							ctx.fillStyle = "white";
							ctx.arc(j * x + 10, i * y + 10, 5, 0, 2 * Math.PI);
							ctx.fill();
							ctx.closePath();
							ctx.stroke();
						}

						if(arcArr2[i][j] == 1) {
							ctx.beginPath();
							ctx.fillStyle = "white";
							ctx.arc(j * x + 110, i * y + 10, 5, 0, 2 * Math.PI);
							ctx.fill();
							ctx.closePath();
							ctx.stroke();
						}
						if(arcArr3[i][j] == 1) {
							ctx.beginPath();
							ctx.fillStyle = "white";
							ctx.arc(j * x + 210, i * y + 10, 5, 0, 2 * Math.PI);
							ctx.fill();
							ctx.closePath();
							ctx.stroke();
						}
						if(arcArr4[i][j] == 1) {
							ctx.beginPath();
							ctx.fillStyle = "white";
							ctx.arc(j * x + 310, i * y + 10, 5, 0, 2 * Math.PI);
							ctx.fill();
							ctx.closePath();
							ctx.stroke();
						}
						if(arcArr5[i][j] == 1) {
							ctx.beginPath();
							ctx.fillStyle = "white";
							ctx.arc(j * x + 410, i * y + 10, 5, 0, 2 * Math.PI);
							ctx.fill();
							ctx.closePath();
							ctx.stroke();
						}
						if(arcArr6[i][j] == 1) {
							ctx.beginPath();
							ctx.fillStyle = "white";
							ctx.arc(j * x + 510, i * y + 10, 5, 0, 2 * Math.PI);
							ctx.fill();
							ctx.closePath();
							ctx.stroke();
						}
						if(arcArr7[i][j] == 1) {
							ctx.beginPath();
							ctx.fillStyle = "white";
							ctx.arc(j * x + 610, i * y + 10, 5, 0, 2 * Math.PI);
							ctx.fill();
							ctx.closePath();
							ctx.stroke();
						}
						if(arcArr8[i][j] == 1) {
							ctx.beginPath();
							ctx.fillStyle = "white";
							ctx.arc(j * x + 710, i * y + 10, 5, 0, 2 * Math.PI);
							ctx.fill();
							ctx.closePath();
							ctx.stroke();
						}
						if(arcArr9[i][j] == 1) {
							ctx.beginPath();
							ctx.fillStyle = "white";
							ctx.arc(j * x + 810, i * y + 10, 5, 0, 2 * Math.PI);
							ctx.fill();
							ctx.closePath();
							ctx.stroke();
						}
						if(arcArr0[i][j] == 1) {
							ctx.beginPath();
							ctx.fillStyle = "white";
							ctx.arc(j * x + 910, i * y + 10, 5, 0, 2 * Math.PI);
							ctx.fill();
							ctx.closePath();
							ctx.stroke();
						}
					}
				}
			}, 20)
		</script>
	</body>

</html>